<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>File System</title>
  </head>

  <body>
    <div id="mountNode"></div>
    <script src="assets/hierarchy.js"></script>
    <script src="../build/g6.js"></script>
    <script>
      G6.registerNode('file-node', {
        draw(cfg, group) {
          const keyShape = group.addShape('rect', {
            attrs: {
              x: cfg.x - 4,
              y: cfg.y - 12,
              fill: '#fff',
              stroke: null,
            },
          });
          let marker;
          if (cfg.data.collapsed) {
            marker = group.addShape('marker', {
              attrs: {
                symbol: 'triangle',
                x: cfg.x + 4,
                y: cfg.y - 2,
                r: 4,
                fill: '#666',
              },
            });
          } else if (cfg.data.children && cfg.data.children.length > 0) {
            marker = group.addShape('marker', {
              attrs: {
                symbol: 'triangle-down',
                x: cfg.x + 4,
                y: cfg.y - 2,
                r: 4,
                fill: '#666',
              },
            });
          }
          const shape = group.addShape('text', {
            attrs: {
              x: cfg.x + 15,
              y: cfg.y + 4,
              text: cfg.data.name,
              fill: '#666',
              fontSize: 16,
              textAlign: 'left',
            },
          });
          const bbox = shape.getBBox();
          keyShape.attr({
            width: bbox.width + 20,
            height: bbox.height + 4,
          });
          return keyShape;
        },
      });
      G6.registerEdge(
        'step-line',
        {
          getControlPoints(cfg) {
            const startPoint = cfg.startPoint;
            const endPoint = cfg.endPoint;
            return [
              {
                x: startPoint.x,
                y: endPoint.y,
              },
            ];
          },
        },
        'polyline',
      );
      const graph = new G6.TreeGraph({
        container: 'mountNode',
        width: 500,
        height: 500,
        linkCenter: true,
        modes: {
          default: [
            {
              type: 'collapse-expand',
              animate: false,
              onChange(item, collapsed) {
                const data = item.get('model').data;
                data.collapsed = collapsed;
                return true;
              },
            },
          ],
        },
        defaultEdge: {
          style: {
            stroke: '#A3B1BF',
          },
        },
        layout: data => {
          return Hierarchy.indented(data, {
            isHorizontal: true,
            direction: 'LR',
            indent: 80,
            getHeight() {
              return 16;
            },
            getWidth() {
              return 16;
            },
          });
        },
      });
      const data = {
        id: '1',
        name: 'src',
        children: [
          {
            id: '1-1',
            name: 'behavior',
            children: [],
          },
          {
            id: '1-3',
            name: 'graph',
            children: [
              {
                id: '1-3-1',
                name: 'controller',
                children: [],
              },
            ],
          },
          {
            id: '1-5',
            name: 'item',
            children: [],
          },
          {
            id: '1-6',
            name: 'shape',
            children: [
              {
                id: '1-6-2',
                name: 'extend',
                children: [],
              },
            ],
          },
          {
            id: '1-7',
            name: 'util',
            children: [],
          },
        ],
      };
      graph.data(data);
      graph.render();
      graph.getNodes().forEach(node => {
        const model = node.get('model');
        model.shape = 'file-node';
        model.label = model.data.name;
      });
      graph.getEdges().forEach(edge => {
        edge.get('model').shape = 'step-line';
      });
      graph.refresh();
      graph.fitView();
    </script>
  </body>
</html>
